<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <header>
    <span>logo</span>
    <nav>
      <ul>
        <li><a href="">链接1</a></li>
        <li><a href="">链接2</a></li>
        <li><a href="">链接3</a></li>
      </ul>
    </nav>
  </header>
  <main>
    <!-- 媒体 -->
    <section>
      <audio src="" controls></audio>
      <video src="" controls width="800" height="300"></video>
    </section>
    <!-- 表格 -->
    <section>
      <table border="1">
        <colgroup>
          <col span="2" style="background-color: lightblue;">
          <col style="background-color: pink;">
        </colgroup>
        <caption>表格标题</caption>
        <thead>
          <tr>
            <th>列标题1</th>
            <th>列标题2</th>
            <th>列标题3</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
          </tr>
        </tbody>
        <tfoot>
          <tr>
            <td>XXX</td>
            <td>XXX</td>
            <td>XXX</td>
          </tr>
        </tfoot>
      </table>
    </section>
    <!-- 页面增强 -->
    <section>
      进度一：<meter value="30" max="100" low="40" high="80"></meter>
      进度二：<progress value="30" max="100"></progress>
    </section>
    <!-- 文本 -->
    <section>
      <aside>侧边广告</aside>
      <article>
        <h1>文章标题</h1>
        <strong>加粗</strong>
        <small>变小</small>
        <code>代码</code>
        <kbd>ctrl</kbd>
        <samp>samp</samp>
        <i>倾斜</i>
        <em>倾斜</em>
        <address>地址</address>
        <var>倾斜</var>
        <dfn>引用</dfn>
        <q>引用</q>
        sdf<sub>sdf</sub>
        sdf<sup>sf</sup>
        <mark>黄色</mark>
      </article>
    </section>
  </main>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <br>
  <footer>
    <p>
      <ul>
        <li><a href="">友链1</a></li>
        <li><a href="">友链2</a></li>
        <li><a href="">友链3</a></li>
        <li><a href="">友链4</a></li>
        <li><a href="">友链5</a></li>
        <li><a href="">友链6</a></li>
        <li><a href="">友链7</a></li>
        <li><a href="">友链8</a></li>
      </ul>
    </p>
  </footer>
</body>
</html>